<template>
    <div class="carousel-box" :style="{background: backgroundImgUrl}">
        <div class="base flex">
            <div class="carousel">
                <swiper :navigation="true" class="mySwiper" @slideChange="slideChange">
                    <swiper-slide v-for="(item, index) in carouselData" :key="index" >
                        <img
                            class="carousel-img"
                            :src="item.imageUrl"
                            @click="clickImg(index)"
                            :title="item.name"
                        />
                    </swiper-slide>
                </swiper>
            </div>
            <div class="carousel-user-info">
                <div class="carousel-user-icon">
                    <n-avatar
                        :size="64"
                        :src="store.state.user.avatarUrl"
                    />
                </div>
                <div class="carousel-user-nickname">
                    <p>{{ store.state.user.nickName }}</p>
                </div>
                <div class="carousel-user-profile-info">
                    <div class="grid grid-cols-3">
                        <div class="carousel-user-profile-info-module">
                            <p class="font-bold">{{ store.state.user.event }}</p>
                            <p>动态</p>
                        </div>
                        <div class="carousel-user-profile-info-module">
                            <p class="font-bold">{{ store.state.user.follows }}</p>
                            <p>关注</p>
                        </div>
                        <div class="carousel-user-profile-info-module">
                            <p class="font-bold">{{ store.state.user.followeds }}</p>
                            <p>粉丝</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NAvatar} from 'naive-ui';
import {onMounted, ref, watchEffect} from "vue";
import {useStore} from "vuex";
import {getUserDetail} from "@/network/user";
import {getBanner} from "@/network/data/banner";
// Import Swiper Vue.js components
import {Swiper, SwiperSlide} from 'swiper/vue';

// Import Swiper styles
import 'swiper/swiper.scss';

import "swiper/components/navigation/navigation.min.css"


// import Swiper core and required modules
import SwiperCore, {
    Navigation
} from 'swiper/core';
import {useRouter} from "vue-router";

// install Swiper modules
SwiperCore.use([Navigation]);
export default {
    name: "Carousel",
    setup() {
        const store = useStore();
        const router = useRouter();
        // 轮播图数据
        let carouselData = ref([]);
        // 判断该轮播图是否活跃
        let isActive = ref(false);
        // 记录轮播图下标
        let currentBacgImgIndex = ref(0);
        // 轮播图背景图片
        let backgroundImgUrl = ref('');
        
        // 轮播图滑动
        const slideChange = (Swiper) => {
            currentBacgImgIndex.value = Swiper.activeIndex;
            backgroundImgUrl.value = `url(${carouselData.value[currentBacgImgIndex.value].imageUrl}` + '?imageView&blur=40x20)'
        }
        const init = () => {
            // 获取banner数据
            getBanner().then(res => {
                carouselData.value = res.data.banners;
                backgroundImgUrl.value = `url(${carouselData.value[currentBacgImgIndex.value].imageUrl}` + '?imageView&blur=40x20)';
            })
            if (store.state.user.isLogin == true && store.state.user.uid != -1) {
                getUserDetail(store.state.user.uid).then(res => {
                    store.commit('setEvent', res.data.profile.eventCount);
                    store.commit('setFollows', res.data.profile.follows);
                    store.commit('setFolloweds', res.data.profile.followeds);
                })
            }
        }
        watchEffect(() => {
            let id = store.state.user.uid;
            let status = store.state.user.isLogin;
            if (store.state.user.isLogin == true && store.state.user.uid != -1) {
                getUserDetail(store.state.user.uid).then(res => {
                    store.commit('setEvent', res.data.profile.eventCount);
                    store.commit('setFollows', res.data.profile.follows);
                    store.commit('setFolloweds', res.data.profile.followeds);
                })
            } else {
                // 退出登录，恢复初始数据
                store.commit('setEvent', 0);
                store.commit('setFollows', 0);
                store.commit('setFolloweds', 0);
            }
        })
        // 点击了轮播图里面的图片
        const clickImg = (index) => {
    
            router.push({path: '/song', query: {ids: carouselData.value[index].targetId}})
        }
    
        onMounted(() => {
            init();
        })
        return {
            carouselData,
            isActive,
            backgroundImgUrl,
            clickImg,
            store,
            slideChange
        }
    },
    components: {
        NAvatar,
        Swiper,
        SwiperSlide
    }
}
</script>

<style lang="scss">
@import '@/assets/css/base.scss';
.carousel-box {
    width: $client-width;
    
    .carousel {
        @apply w-3/5 flex;
        .swiper-container {
            width: 100%;
            height: $Carousel-height;
        }
        .swiper-slide {
            @apply text-white;
        }
        .carousel-img {
            @apply cursor-pointer;
            width: 100%;
            height: $Carousel-height;
            object-fit: cover;
        }
    
    }
    .carousel-user-info {
        @apply relative w-2/5;
        height: $Carousel-height;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.5);
        
        .carousel-user-icon {
            @apply flex justify-center items-center h-1/3;
        }
        
        .carousel-user-nickname {
            @apply flex justify-center items-center h-1/3;
        }
        
        .carousel-user-profile-info {
            @apply flex justify-center items-center h-1/3;
            .carousel-user-profile-info-module {
                width: 80px;
                height: 80px;
                transform: translateY(20px);
                
                p {
                    @apply flex items-center justify-center;
                }
            }
        }
    }
}
</style>